<template>
  <div>
    <el-form
      v-if="model"
      ref="form"
      :size="size"
      v-bind="$attrs"
      :model="model"
      :rules="rules"
      :validate-on-rule-change="false"
    >
      <template v-for="(item, index) in showOptions">
        <el-form-item
          v-if="typeStatus(item,1)"
          :key="item.prop"
          :size="size"
          :label="item.label"
          :prop="item.prop"
          @click.native="allFun(item, index,'clickFun')"
        >
          <template>
            <component
              :is="`el-${item.type}`"
              v-model.trim="model[item.prop]"
              v-bind="item.attrs"
            />
          </template>
        </el-form-item>

        <el-form-item
          v-if="typeStatus(item,2)"
          :key="item.prop"
          :size="size"
          :label="item.label"
          :prop="item.prop"
          @click.native="allFun(item, index,'clickFun')"
        >
          <template>
            <component
              :is="`el-${item.type}`"
              v-model.trim="model[item.prop]"
              v-bind="item.attrs"
            />
          </template>
        </el-form-item>

        <el-form-item
          v-if="typeStatus(item,3)"
          :key="item.prop"
          :label="item.label"
          :size="size"
          :prop="item.prop"
        >
          <component
            :is="`el-${item.type}`"
            v-model.trim="model[item.prop]"
            v-bind="item.attrs"
            @change="allFun(item, index,'changeFun')"
          >
            <component
              :is="`el-${child.type}`"
              v-for="child in item.children"
              :key="child.label"
              :value="child.value"
              :label="child.label"
            />
          </component>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>

// 深拷贝
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "",
  props: {
    options: {
      type: Array,
      required: true
    },
    size: {
      type: String,
      default: "small"
    }
  },
  data() {
    return {
      model: {},
      // 保存后需要缓存的内容
      cloneModel: {}
    };
  },
  computed: {
    showOptions() {
      return this.options.filter(op => !op.hide);
    },
    // 验证规则
    rules() {
      const r = {};
      for (let i = 0; i < this.options.length; i++) {
        const op = this.options[i] || {};
        r[op["prop"]] = op.rules;
      }
      return r;
    }
  },
  created() {
    this.initForm();
  },
  methods: {
    // 初始化表单获取初始值
    initForm() {
      const m = {};
      for (let i = 0; i < this.options.length; i++) {
        const { value, prop } = this.options[i] || {};
        m[prop] = value;
      }
      this.model = cloneDeep(m);
    },
    allFun(item, index, fun) {
      if (typeof item[fun] === "function") {
        item[fun](item, index, this.model);
      }
    },
    typeStatus(item, flag) {
      const { type, children } = item || {};
      console.log(flag, "flag", type, "type", children, "children");
      // if (flag === 1 && type === "special-input") {
      //   console.log(1, "typoe", type);
      //   return true;
      // } else if (type === 2) {
      //   console.log(2, "typoe", type);

      //   return true;
      // } else if (type === 3 && children.length) {
      //   return true;
      // }
      return true;
    }
  }
};
</script>

<style scoped lang="scss">

</style>
